
// 轮播图开始
const imgs = [{
      url: './upload/img0.jpg'
   },
   {
      url: './upload/img1.jpg'
   },
   {
      url: './upload/img2.jpg'
   },
   {
      url: './upload/img3.jpg'
   },
   {
      url: './upload/img4.jpg'
   },
   {
      url: './upload/img5.jpg'
   },
   {
      url: './upload/img6.jpg'
   },
   {
      url: './upload/img7.jpg'
   },
]

const jl = document.querySelector('.j-left')
const jr = document.querySelector('.j-right')
const bgci = document.querySelector('.b-ban')
const img = document.querySelector('.ban-left a img')
const as = document.querySelectorAll('.dots a')
const ban = document.querySelector('.ban')
let i = 0
jr.addEventListener('click', function (e) {
   e.preventDefault()
   i++
   if (i > imgs.length - 1) i = 0
   render(i)

})
jl.addEventListener('click', function (e) {
   e.preventDefault()
   i--
   if (i < 0) i = imgs.length - 1
   render(i)
})

ban.addEventListener('mouseenter', function () {
   clearInterval(id)
})
ban.addEventListener('mouseleave', function () {
   id = setInterval(function () {
      jr.click()
   }, 1000)
})

for (let j = 0; j < as.length; j++) {
   as[j].addEventListener('mouseenter', function () {
      // e.prevntDefault()
      img.src = imgs[j].url
      if (document.querySelector('.active')) document.querySelector('.active').classList.remove('active')
      as[j].classList.add('active')
      bgci.style.backgroundImage = `url(./upload/0${j}.jpg)`
      as[j].addEventListener('mouseleave', function () {
         i = j
      })
   })

}

function render(m) {
   // m.prevntDefault()
   const url = imgs[i].url
   img.src = url
   bgci.style.backgroundImage = `url(./upload/0${i}.jpg)`
   if (document.querySelector('.active')) document.querySelector('.active').classList.remove('active')
   as[m].classList.add('active')
}

let id = setInterval(function () {
   jr.click()
}, 1000)

// 轮播图结束

// 新碟上架开始
const pre = document.querySelector('.pre')
const nxt = document.querySelector('.nxt')
const uls = document.querySelectorAll('.roll .roller-flag')
const nums = ['-645px','0px','645px','-645px']
// let n = 0
// let j = 0
let m = 0
console.log(uls);
nxt.addEventListener('click',function(){
   m--
   if(m <0) m = nums.length-1
   for (let n = 0; n < uls.length; n++) {
   uls[n].style.left  = nums[m]
   m--
   if(m <0) m = nums.length-1
   // uls[n].style.transition  =  `left 1s ease 0s`
 }

})
pre.addEventListener('click',function(){
   
   m++
   if(m > nums.length-1) m = 0
   for (let n = 0; n < uls.length; n++) {
   uls[n].style.left  = nums[m]
   m++
   if(m >nums.length-1) m = 0
 }
   
})
// 新碟上架结束

// top块开始
const topp = document.querySelector('#g_backtop')
window.addEventListener('scroll',function(){
      const ht = document.documentElement.scrollTop
      const ban = document.querySelector('.b-ban')
      topp.style.display = ht >= ban.offsetTop ? 'block' : 'none'
    
})
// top块结束

// 底部播放栏开始

      //阻止所有的a刷新界面
      const ass=document.querySelectorAll('.f-updown a')
      for (let i=0;i<ass.length;i++) {
         ass[i].addEventListener('click',function(e) {
         e.preventDefault()
      })
      }
      //底部显示隐藏
      const hand = document.querySelector('.f-updown')
      const lock = document.querySelector('.lock a')
      let flag=true
      hand.addEventListener('mouseenter', function () {
         document.querySelector('.f-updown').style.bottom = 0
      })
      function fn() {
         document.querySelector('.f-updown').style.bottom = '-45px'
      }
      hand.addEventListener('mouseleave', fn)
      //锁
      lock.addEventListener('click',function() {
         flag=!flag
         if (flag) {
            lock.classList.remove('lockdown')
            hand.addEventListener('mouseleave', fn)
         } else {
            lock.classList.add('lockdown')
            document.querySelector('.f-updown').style.bottom = 0
            hand.removeEventListener('mouseleave', fn)
         }
         
      })
      //进度条
      const ready=document.querySelector('.ready')
      const curser=document.querySelector('.pbar .curser')
      curser.onmousedown=function(e) {
         e=e||window.e
         const progressLeft = e.clientX - this.offsetLeft
         document.onmousemove = function(e) {
         e=e||window.e
            const progressX = e.clientX - progressLeft
            if(progressX<=0){
                  progressX = 0;
              }
              else if(progressX>=493){
                  progressX = 493;
              }
            curser.style.left=progressX+'px'
            ready.style.width=progressX+'px'
      }
         document.onmouseup = function(e){
              e = e || window.e
              document.onmousemove = null
              document.onmouseup = null
          }
          return false
      }
      //播放按钮切换
      const play=document.querySelector('.btns .play')
      play.addEventListener('click',function() {
         flag=!flag
         if(flag) {
            play.classList.add('palse')
         } else {
            play.classList.remove('palse')
         }
      })
      //音量
      const vol=document.querySelector('.volume')
      vol.addEventListener('click',function() {
         flag=!flag
         if(flag) {
            document.querySelector('.m-vol').style.display='block'
         } else {
            document.querySelector('.m-vol').style.display='none'
         }
      })
      //音量大小调节
      const vbtn=document.querySelector('.curr .btn')
      const vcur=document.querySelector('.vbg .curr')
      vbtn.onmousedown=function(e) {
         e=e||window.e
         // console.log(this.offsetTop);
         let progressTop = e.clientY - this.offsetTop
         // console.log(this.offsetTop);
         document.onmousemove = function(e) {
         e=e||window.e
            const progressY = e.clientY - progressTop
            
            
            if(progressY >= 0){
                  progressY = 0;
              }
              else if(progressY <= -90){
                  progressY = -90;
              }
            
            vcur.style.height=-progressY+ 'px'
            
      }
         document.onmouseup = function(e){
              e = e || window.e
              document.onmousemove = null
              document.onmouseup = null
          }
          return false
      }
      //随机播放
      const mode=document.querySelector('.mode')
      const playmode=['随机','单曲循环','循环']
      let f=0
      mode.addEventListener('click',function() {
         if(f>2) f=0
         document.querySelector('.modetip').style.display='block'
         document.querySelector('.modetip').innerHTML=playmode[f]
         if (f===0) {
            document.querySelector('.mode').classList.remove('mode1')
            document.querySelector('.mode').classList.remove('mode2')
         }
         if (f===1) {
            document.querySelector('.mode').classList.add('mode1')
         }
         if (f===2) {
            document.querySelector('.mode').classList.add('mode2')
         }
         f++
      })
      mode.addEventListener('mouseleave',function() {
         document.querySelector('.modetip').style.display='none'
      })
      //播放列表
      const clos=document.querySelector('.f-close')
      clos.addEventListener('click',function() {
         document.querySelector('.f-playlist').style.display='none'
      })
      const showadd=document.querySelector('.controls .add')
      showadd.addEventListener('click',function() {
         flag=!flag
         document.querySelector('.f-playlist').style.display=flag?'block':'none'
      })

// 底部播放栏结束